<template>
    <Modal @on-ok="choose" class="orgStructure"
            title="选择组织架构"
            ok-text="保存"
            width="500"
            v-model="show"
            :mask-closable="false"
            :transfer="false">
        <span>已选择部门: </span><span style="color: red">{{selOrgStruct.path}}</span>
        <Tree ref="tree" :data="orgStructTree" @on-select-change="selectChange" style="height: 600px;overflow-y: scroll"></Tree>
    </Modal>
</template>

<script>
    import * as orgStructOpr from '../../http/orgStruct.api'

    export default {
        props: ['showModal', 'employeeInfo'],
        name: "ChooseOrgStructure",
        data() {
            return {
                show: false, // 控制当前模块显示关闭
                orgStructTree: [],

                selOrgStruct: ''
            }
        },
        watch: {
            show: function (newVal, oldVal) { // 控制当前模块是否显示
                this.$emit('toggleOrgStructModal', newVal);
            },
            showModal: function (newVal, oldVal) { // 属性，外部接收过来
                this.show = newVal;
            },

        },
        mounted() {
            // console.log('mounted', this.showModal);
            //  console.log('mounted', JSON.stringify(this.employeeInfo));
            this.getOrgStructList(); // 初始化组织架构树
        },
        created() {
            // console.log('created', JSON.stringify(this.employeeInfo));
        },
        methods: {
            choose() {
                const _this  = this;
                // console.log(_this.$refs.tree.getSelectedNodes(), _this.selOrgStruct)
                // if (_this.$refs.tree.getSelectedNodes().length) {
                    _this.$emit('orgStructSelected', _this.selOrgStruct)
                // }
            },
            selectChange(nodes) {
                const _this  = this;

                function findPath(tree, key) {
                    if (tree.nodeKey === key) {
                        return tree.title;
                    }
                    if (tree.children&&tree.children.length) {
                        let title = tree.children.map(child => {
                            return findPath(child, key)
                        }).filter(item => item).join("");
                        if (title) {
                            return tree.title + " | " + title;
                        }
                    }
                    return false;
                }
                if (nodes.length) {
                    _this.selOrgStruct = Object.assign({}, nodes[0], {path: findPath(_this.$refs.tree.data[0], nodes[0].nodeKey)});
                } else {
                    _this.selOrgStruct = {};
                }
            },
            getOrgStructList() { // 获取所有组织架构
                const _this = this;
                orgStructOpr.getOrgStructList().then(function (res) {
                    let rootNode = res.data.result.find(item => item.id === 1); // 找根节点，可能调整
                    let groupsObj = res.data.result.reduce(function (groups, item) {
                        let val = ('' + item['parentId']).toUpperCase();
                        groups[val] = groups[val] || [];
                        groups[val].push(item);
                        return groups;
                    }, {});

                    function buildTree(node) {
                        let obj = {
                            title: node.dept,
                            expand: true,
                            origin: node
                        };
                        if (groupsObj[node.id]) { // 有下级节点
                            // 设置子节点，进行监听
                            _this.$set(obj, 'children', groupsObj[node.id].filter(item => item.id !== 1).map(item => buildTree(item)));
                        }
                        return obj;
                    }
                    if (rootNode) {
                        _this.orgStructTree = [buildTree(rootNode)];
                    }
                }).catch(function () {
                    console.log(arguments);
                });
            }
        }
     }
</script>

<style scoped>
    .orgStructure .ivu-modal-wrap{
        z-index: 10000;
    }
    .orgStructure .ivu-modal{
        z-index: 10000;
    }
</style>
